<template>
	<div class="departmentList">
		<el-button size="medium" plain type="primary" @click="add()">新增部门</el-button>

		<!-- 数据表 -->
		<el-table :data="tableData" v-loading="loading" style="width: 100%" row-key="id" stripe fit size="small"
			:tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
			<el-table-column prop="name" label="部门名称"></el-table-column>
			<el-table-column prop="managerName" label="部门主管"></el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="small" type="text" @click="addSonNode(scope.row)">新增下级部门</el-button>
					<el-divider direction="vertical"></el-divider>
					<el-button size="small" type="text" @click="details(scope.row)">部门人员</el-button>
					<el-divider direction="vertical"></el-divider>
					<el-button size="small" type="text" @click="update(scope.row)">编辑</el-button>
					<el-divider direction="vertical"></el-divider>
					<el-button size="small" type="text" @click="handleDelete(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 新增部门对话框 -->
		<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%" :show-close="false">
			<el-form :model="department" :rules="rules" ref="department" label-width="100px" class="demo-ruleForm">
				<el-form-item prop="parentDepartmentId" label="上级部门">
					<treeselect :disabled="disabled" v-model="department.parentDepartmentId" :options="menuOptions"
						:normalizer="normalizer" :show-count="true" placeholder="选择上级部门" />
				</el-form-item>

				<el-form-item prop="name" label="部门名称">
					<el-input type="text" v-model="department.name" auto-complete="off"
						placeholder="请输入部门名称"></el-input>
				</el-form-item>

				<el-form-item label="部门主管" prop="managerId">
					<el-select v-model="department.managerId" filterable remote 
						placeholder="按名字或手机号搜索" :remote-method="remoteMethod" 
						:loading="selectLoading" @focus="remoteMethod('')">
						<el-option v-for="item in userList" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>

			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitBtn('department')" v-debounce>
					确 定
				</el-button>
				<el-button @click="cancleBtn()">取 消</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import Treeselect from "@riophae/vue-treeselect";
	import "@riophae/vue-treeselect/dist/vue-treeselect.css";
	import departmentApi from "../../api/departmentManage.js";
	import userApi from "../../api/user.js";

	export default {
		components: {
			Treeselect
		},
		data() {
			return {
				loading: false,
				selectLoading: false,
				disabled: false,
				tableData: [],
				userList: [],
				dialogVisible: false,
				dialogTitle: "",
				rules: {
					name: [{
						required: true,
						message: "请输入部门名称！",
						trigger: "blur"
					}, ],
					managerId: [{
						required: true,
						message: "请选择部门主管！",
						trigger: "blur"
					}],
				},
				department: {
					id: null,
					name: null,
					parentDepartmentId: null,
					managerId: null,
				},
				// 菜单树选项
				menuOptions: [],
			};
		},
		created() {
			this.initTable();
			this.reset();
		},
		methods: {
			//新增按钮
			add() {
				this.reset();
				this.dialogVisible = true;
				this.dialogTitle = "新增部门";
				this.disabled = false;
			},
			//新增下级部门按钮
			addSonNode(data) {
				console.log(data.id);
				this.department.parentDepartmentId = data.id;
				this.dialogVisible = true;
				this.dialogTitle = "新增下级部门";
				this.disabled = true;
			},
			//编辑按钮
			update(item) {
				console.log("item==>", item)
				this.dialogVisible = true;
				this.dialogTitle = "编辑部门";
				this.department = item;
				let data = {
					label: item.managerName,
					value: item.managerId
				}
				this.userList = new Array
				this.userList.push(data)
				this.disabled = true;
			},
			//详情按钮
			details(item) {
				//console.log("item==>", item)
				let id = item.id
				localStorage.setItem("departmentId", id)
				this.$router.push({
					path: "/departmentManage/department"
				})
			},
			//删除按钮
			handleDelete(data) {
				this.$confirm("是否删除该部门?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(() => {
					departmentApi.deleteDepartment({
						id: data.id
					}).then(res => {
						if (res.code === 200) {
							this.initTable();
						}
					})
				}).catch(() =>{
					
				});
			},

			//对话框确定按钮
			submitBtn(formName) {
				//console.log("department===>", this.department);
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if (this.department.id === null) {
							departmentApi.addDepartment(this.department).then(res => {
								if (res.code === 200) {
									this.initTable();
									this.dialogVisible = false;
									this.reset();
								}
							})
						} else {
							departmentApi.updateDepartment(this.department).then(res => {
								this.initTable();
								this.dialogVisible = false;
								this.reset();
							})
						}
					}
				});
			},

			// 选择框搜索用户
			remoteMethod(query) {
				//console.log("query==>",query)
				let data = {
					nickName: query
				}
				userApi.fuzzyQuery(data).then(res => {
					if (res.code === 200) {
						//console.log("res.data==>",res.data.userVoList)
						this.userList = res.data.userVoList.map(item => {
							return {
								label: `${item.nickName}(${item.roleName})`,
								value: item.id
							}
						})
						//console.log("userList==>", this.userList)
					}
				})
			},

			//对话框取消按钮
			cancleBtn() {
				this.dialogVisible = false;
				this.reset();
			},

			/** 转换菜单数据结构 */
			normalizer(node) {
				//console.log("node==>", node);
				if (node.children && !node.children.length) {
					delete node.children;
				}
				return {
					id: node.id,
					label: node.name,
					children: node.children,
				};

			},
			//重置表单
			reset() {
				this.department = {
					id: null,
					name: null,
					parentDepartmentId: null,
					managerId: null,
				};
			},

			//初始化表数据
			initTable() {
				this.loading = true;
				departmentApi.getDepartmentList().then(res => {
					if (res.code === 200) {
						//console.log("res===>", res.data)
						this.tableData = res.data
						this.menuOptions = res.data
						this.loading = false
					}
				})
			},
		},
	};
</script>

<style scoped>
</style>